@charset "UTF-8";
@import "../base.less";
@red: #a21d1b;
@red_orange: #dd2f1e;
@login_blue: #d40000;
@login_bg: #fff8f7;
@aside_child_bg: #f8dad5;
@blueOpacity: #f9e7e7;
@dark_blue: #b02b2b;
@blue: #d40000;

a {
  color: @red;
  &:hover {
    color: @red_orange;
  }
}
.bluer {
  color: @blue;
}
.searchInput {
  position: relative;
  .input-group-addon {
    color: @gray_33;
  }
}
#loginPage {
  .logoText {
    color: @red;
  }
  .companyLoginMain {
    .title {
      color: @red;
    }
    .loginNav {
      a {
        &.active {
          color: @red;
        }
      }
      .loginNavLine {
        background: @red;
      }
    }
    .inputBox {
      &:hover {
        border-color: @red;
      }
    }
    .numberCode {
      .refresh {
        color: @red;
      }
    }
    .loginBtn {
      .linearGradient(135deg,@red,@red_orange);
      color: @white;
    }
    .phoneCodeBtn {
      border: 1px solid @red;
      color: @red;
      &.disabled {
        border-color: @gray_99;
        color: @gray_99;
      }
    }
  }
  .footLinks {
    .inline {
      color: @red;
    }
  }
}
.btn-info {
  background-color: @red;
  border-color: @red;

  &:hover {
    background-color: @red_orange;
    border-color: @red_orange;
  }

  &[disabled]:hover {
    background-color: @themeRedColor;
    border-color: @themeRedColor;
  }

  &:focus,
  &.focus,
  &:active:hover,
  &:active:focus,
  &.active:hover,
  &.active:focus {
    outline: none;
    background-color: @themeRedColor !important;
    border-color: none !important;
  }
}

.btn-primary {
  &:focus,
  &.focus,
  &:active:hover,
  &:active:focus,
  &.active:hover,
  &.active:focus {
    outline: none;
    background-color: @red !important;
    border-color: none !important;
  }
}

.btn-success {
  &:focus,
  &.focus,
  &:active:hover,
  &:active:focus,
  &.active:hover,
  &.active:focus {
    outline: none;
  }
}

.btn-default {
  &:focus,
  &.focus,
  &:active:hover,
  &:active:focus,
  &.active:hover,
  &.active:focus {
    outline: none;
  }
}

.btn-warning {
  &:focus,
  &.focus,
  &:active:hover,
  &:active:focus,
  &.active:hover,
  &.active:focus {
    outline: none;
  }
}
.btn-disabled {
  background: @gray_f5 !important;
  color: #b1b1b1 !important;
  border-color: @gray_f5 !important;
  &:focus,
  &.focus,
  &:active:hover,
  &:active:focus,
  &.active:hover,
  &.active:focus {
    outline: none;
  }
}
.pagination {
  > li {
    > a {
      color: @gray_33;

      &:hover {
        color: @gray_33;
      }
    }
  }

  > .active {
    > a {
      color: @white;
      background-color: @red;
      border-color: @red;

      &:hover {
        color: @red;
        background-color: @white;
        border-color: @red;
      }
    }
  }
}
.tableMoreOper {
  .tableOperList {
    background: #fff;
    li {
      color: @gray_66 !important;
      &:hover {
        color: @red_orange !important;
      }
    }
  }
}
.note-editor {
  .dropdown-toggle {
    background: @white !important;
  }
  .note-icon-font {
    background-color: none !important;
  }
}
.dropdown-toggle {
  background: @white !important;
  border-color: @gray_c6;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background: @red;
  color: @white;
}

.layui-table,
.layui-table-view {
  .layuiTableOperItem {
    border-right: 1px solid @gray_e4;
    color: @blue;
  }
}
.layui-form-checkbox {
  i {
    &:hover {
      border-color: @blue !important;
    }
  }
}

.layui-form-checked i {
  border-color: @blue !important;
  background: @blue !important;
}

.layui-form-radioed i {
  color: @blue;

  &:hover {
    color: @blue !important;
  }
}

.layui-form-radio i {
  &:hover {
    color: @blue !important;
  }
}

.layui-form-radioed i {
  color: @blue;

  &:hover {
    color: @blue !important;
  }
}

.layui-laypage {
  a:hover {
    color: @red;
  }
  .fixed-table-pagination {
    .dropdown-menu {
      > .active {
        > a {
          background-color: @blue !important;
        }
      }
    }
    input,
    select {
      &:focus {
        border-color: @red !important;
      }
    }

    .layui-laypage-curr {
      .layui-laypage-em {
        background-color: @red;
      }
    }
  }
}

.layui-form-checkbox {
  i {
    &:hover {
      border-color: @red !important;
    }
  }
}

.layui-table-page {
  > li {
    > a {
      color: @gray_33;
      &:hover {
        color: @red;
        background-color: @white;
        border-color: @red;
      }
    }
  }

  > .active {
    > a {
      color: @white !important;
      background-color: @red !important;
      border-color: @red !important;
    }
  }
}

.layui-form-checked i {
  border-color: @gray_99 !important;
  background: @gray_99 !important;
}
.layui-form-checked {
  &[lay-skin="primary"] {
    i {
      border-color: @blue !important;
      background: @blue !important;
    }
  }
}
.layui-layer-btn {
  .layui-layer-btn0 {
    border-color: @blue !important;
    background-color: @blue !important;
    color: @white !important;
  }
}

.label-success {
  background: @gray_99;
}

.blue {
  color: @blue;
}

.red {
  color: @red;
}
.pointer {
  &:hover {
    color: @red;
  }
}

.container_top {
  .linearGradient(0deg, @red, @themeRedColor);
  border-bottom-color: @white;
  .headLogo {
    background: @white;
    a {
      color: @red;
    }

    &:hover {
      box-shadow: 2px 2px 10px @themeDarkRedColor;
    }
  }

  .headBar {
    > li {
      > a {
        color: @white;

        &.active {
          background: rgba(50, 50, 50, 0.1) !important;
          color: @white;
        }

        &:hover {
          background: rgba(255, 255, 255, 0.15);
        }
      }

      > .dropdown-menu {
        > li {
          > a {
            color: @gray_44;
          }
          :hover {
            background: @gray_f1;
            color: @red;
          }
        }
      }
    }
  }

  .headMenu {
    > li {
      > .dropdown-toggle {
        background: none !important;
        &:hover {
          background: rgba(0, 0, 0, 0.1) !important;
        }
      }
      > .label {
        background: @white;
        color: @red;
      }
      > .dropdown-toggle:after {
        display: none;
      }

      > a {
        color: @white;

        &:hover {
          color: @gray_f5;
          background: rgba(0, 0, 0, 0.1);
        }
      }

      &.messages-menu {
        > .dropdown-menu {
          > li {
            &.header {
              background-color: @gray_f9;
            }
            &.footer {
              a {
                background-color: @white;
              }
              :hover {
                // background: @gray_e4;
                color: @red;
              }
            }
          }
        }
      }

      &.more {
        .dropdown-menu {
          background: @white;
          .item {
            cursor: pointer;
            &:hover {
              color: @red;
            }
          }
        }
      }
    }
  }
}

.container_left {
  .comTranstion();
  background: @red;
  .menuBox {
    ul {
      li {
        a {
          color: @white;
          &:hover {
            color: rgb(248, 215, 215);
          }
          i {
            color: @white;
          }
        }
        &.active {
          a {
            color: @white;
            background: @red_orange;
            &:hover {
              color: @white;
            }
          }
        }
        .menuText {
          .number {
            color: @white !important;
            background: @red !important;
          }
        }
      }

      &.childMenu {
        background: @white;
        a {
          color: @gray_44;
          &:hover {
            color: @red_orange;
          }
        }
      }
    }
  }

  .fullSide {
    li {
      > a {
        &:hover {
          color: @blue;
        }
      }

      &.active {
        > a {
          background: @blue;
          color: @white;
        }
      }
    }
  }
}

.treeBox {
  background: @white;
  border-bottom: 1px solid @gray_e6;
  .treeMain {
    a {
      border: 1px solid @gray_e4;
      background: @white;
      box-shadow: 0 0 5px @gray_e6;
      color: @gray_44;

      .icon-close-X {
        color: @gray_d6;

        &:hover {
          color: @themeRedColor;
        }
      }

      &:hover {
        color: @themeRedColor;
      }

      &.active {
        background-color: @red;
        color: @white;

        .icon-close-X {
          color: @white;
        }
      }
    }
  }
  .treeOper {
    .iconfont {
      color: @gray_66 !important;
    }
    .item {
      &:hover {
        color: @red;
      }
    }
  }
  .home {
    border-right: 1px solid @gray_e6;
    color: @gray_66;
    border-top: 2px solid @white;

    &:hover {
      color: @red;
    }

    &.active {
      border-top-color: @dark_blue;
    }
  }

  .closeAll {
    border-left: 1px solid @gray_d6;
    color: @gray_66;

    &:hover {
      color: @red;
    }
  }
}

/*通用的*/
#loadingBox {
  .loading {
    color: @gray_99;
    &::before {
      border-bottom-color: @gray_33;
    }
  }
}

.searchBox {
  .searchForm {
    .searchFormClose {
      color: @blue;
    }
  }
}

.formItem {
  .requeid {
    border-color: @red;

    &:focus {
      border-color: @red !important;
      .boxShadow(0, 0, 2px, @red);
    }
    & + .errorText {
      display: block;
    }
  }

  .errorText {
    color: @red;
  }

  .dropdown {
    .btn {
      color: @gray_33 !important;
      .close-select {
        &:hover {
          color: @red;
        }
      }
    }
  }
}
.formModal {
  .formHead {
    background: @themeLightRedColor;
    .titleNumber {
      background: @white;
      color: @themeLightRedColor;
    }
    .spanText {
      color: @white;
    }
    .spanMsg {
      color: @white;
    }
    .operAdd {
      color: @white;
    }
    .formHeadOper {
      .iconfont {
        color: @white;
      }
    }
  }
}
.add-on {
  color: @gray_99;
}
.comFormAdd {
  border: 1px solid @red;
  background: #faebea;
  color: @red;
}
.myFormModal {
  .myFormItem {
    .formBox {
      .clearValue {
        color: @gray_99;
      }
      .form-control[readonly] {
        background: @white;
      }
    }
    .dateInput {
      .iconfont {
        color: @gray_99;
      }
    }
  }
}
.nav-tabs {
  li {
    &.active {
      a {
        border-color: @red !important;
        color: @red !important;
      }
    }
  }
}
.comSwitch {
  &.off {
    &::before {
      color: @gray_99;
      background: @gray_e6;
    }
  }

  &.on {
    border-color: @blue;

    &::before {
      color: @white;
      background: @blue;
    }
  }

  &.switchRound {
    &.off {
      &::before {
        color: @gray_99;
        background: @gray_e6;
      }
    }

    &.on {
      &::before {
        color: @white;
        background: @blue;
      }
    }
  }
}
.blueTitle {
  background: @red_orange;
}
.grayTitle {
  background: @gray_f1;
  color: @gray_66;
  border: 1px solid @gray_e6;
}
.comSelectBox {
  .comSelectInput {
    position: relative;
    .iconfont {
      color: @gray_99;
    }
  }

  .comSelectDownList {
    background: @white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    li {
      &:hover {
        color: @blue;
      }

      &.active {
        background: @blue;
        color: @white;
      }
      &.checkBoxItem {
        &:hover {
          color: @gray_66;
          .text {
            color: @blue;
          }
        }
        &.active {
          background: rgba(253, 202, 202, 0.1);
          color: @blue;
          .iconfont {
            color: @blue !important;
          }
        }
        .iconfont {
          color: @gray_66;
        }
      }
    }
  }
}
.comTabList {
  position: relative;
  &.lineTab {
    .item {
      border-bottom: 2px solid @white;
      &.active {
        border-color: @blue;
        color: @blue;
      }
    }
  }
  &.buttonTab {
    .item {
      border: 1px solid #e6e6e6;
      &:hover {
        color: @blue;
      }
      &.active {
        color: #fff !important;
        background: @blue;
      }
    }
  }
}
.comTab {
  background: @gray_f1;
  border-bottom: 1px solid @gray_d6;
  li {
    &.active {
      background: @white;
      border: 1px solid @gray_d6;
    }
  }
}

/*侧边form*/
.sideForm {
  .sideFormHead {
    background: @red;
    color: @white;
  }
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  // background-color: @gray_99;
  // background-clip: content-box;
  // border: 1px solid @gray_99;
  // padding: 0.1rem;
  // box-sizing: border-box;
  accent-color: rgb(220, 2, 2) !important;
}

/*上传按钮*/
.fileBtnBox {
  .fileName {
    .iconfont {
      color: @blue;
    }
  }
}

.noticeBox {
  .noticeItem {
    .title {
      background: @themeLightRedColor;
      color: @white;
    }

    .left {
      color: @red;
    }

    li {
      .number {
        color: @orange;
      }
    }
  }
}
/*搜索结果*/
.comSearchResBox {
  background: @white;
  li {
    &:hover {
      color: @blue;
      background: @gray_f5;
    }
    &.active {
      color: @white;
      background: @blue;
    }
  }
}
/*下拉树*/
.comTreeSelect {
  .inputBox {
    .iconfont {
      color: @gray_99;
    }
  }
  .comTreeBox {
    border: 1px solid @gray_d6;
    background: @white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
}
/*省市区*/
.comProviceBox {
  background: @white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  .listBox {
    border-right: 1px solid @gray_e6;
    li {
      &:hover {
        color: @red;
        background: @gray_f1;
      }
      &.active {
        color: @white;
        background: @themeLightRedColor;
      }
    }
  }
}
/*二级分类图*/
@lineWith: 1px;
@itemM: 15px;
@itemHeight: 32px;
@itemWidth: 100px;

.viewChat {
  .chatItem {
    > .item {
      > .viewBox {
        &.blue {
          color: #fff;
          background: @blue;
          border-color: @blue;
        }
        &.orange {
          color: #fff;
          background: @orange;
          border-color: @orange;
        }
        &.red {
          color: #fff;
          background: @red;
          border-color: @red;
        }
      }
    }
  }
}
.datetimepicker table tr td.active {
  background: @red !important;
  color: @white !important;
  text-shadow: none !important;
}
//日历
.myCalendar {
  border-top: 1px solid @gray_d6;
  .calendarView {
    td {
      > div {
        &:hover {
          color: @themeLightRedColor;
        }
      }

      &.disabled {
        > div {
          background: @gray_f9;
          color: @gray_99;
          border-color: @gray_f9;
          cursor: not-allowed;
        }
      }
      &.today {
        > div {
          color: @red;
          border-color: @red;
        }
      }
      &.active {
        > div {
          background: @themeLightRedColor;
          color: @white;
          border-color: @themeLightRedColor;
        }
      }
      &.weekend {
        > div {
          background: @themeGreenColor;
          color: @white;
          border-color: @themeGreenColor;
        }
      }
      &.special {
        > div {
          background: @themeRedColor;
          color: @white;
          border-color: @themeRedColor;
        }
      }
    }
  }
}
.self-btn-group {
  .btn-default {
    &:active {
      &:hover {
        background: @blue !important;
        color: @white !important;
        border-color: @blue !important;
        box-shadow: none !important;
      }
    }
    &:hover {
      background: none !important;
      color: @blue;
      border-color: @blue;
    }
    &.active {
      background: @blue !important;
      color: @white;
      border-color: @blue;
    }
  }
}
.pointer:hover {
  color: @gray_66 !important;
}
.page_container {
  /*左侧菜单*/
  .page_aside {
    background-image: linear-gradient(90deg, #d40000, #f52f2f);
    box-shadow: 3px 0 4px rgba(0, 0, 0, 0.1);
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #f35151;
    }
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
      background: #e8e8e8;
    }
  }
  .child_menu_box {
    background: #fff;
    .menu_title {
      border-bottom: 1px solid @gray_e6;
    }

    .child_menu_list {
      box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1);
      li {
        color: #666;
        > span {
          color: @gray_33;
        }
        > a {
          color: @gray_33;
        }
        a {
          &:hover {
            color: @blue;
          }
          &.active {
            color: @blue;
            background: @aside_child_bg;
          }
        }
        &.firstOther {
          border-top: 1px solid @gray_d6;
        }
      }
    }
    .child_nav_hide {
      border: 1px solid @gray_d6;
      color: @gray_99;
    }
  }
  .showAsid {
    background: @blue;
    color: @white;
  }
  .page_header {
    padding: 0;
    color: @white;

    .logo {
      background-image: linear-gradient(90deg, #ff0000, #fd3939);
    }

    .page_header_top {
      border-bottom: 1px solid @gray_e6;
    }

    .header_right {
      > li {
        &.refresh {
          &:hover {
            color: @blue;
          }
        }
      }

      .dropdown {
        li {
          &:hover {
            color: @blue;
          }
        }
      }
    }
  }
  .page_content {
    .page_main {
      background: @gray_f8;
    }
  }
}
.asideMenu {
  .menu_item {
    color: #fff;
    &:hover,
    &.active {
      background: #fd363a !important;
    }
  }
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 1px;
}
/* 滚动条整体样式 */
::-webkit-scrollbar {
  background: @white;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  background-color: #fde8e8;
  /* 轨道背景色 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  // background-color: #888; /* 滑块背景色 */
  background: #ff1818;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}

/* 滚动条滑块在鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  // background-color: #555; /* 悬停时滑块背景色 */
  background: #fb1212;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
.selfBtnGroup {
  .btnItem {
    border: 1px solid @blue;
    &:last-child {
      border-right: 1px solid @blue;
    }
    &.active {
      background: @blue;
      color: @white;
    }
  }
  &.selfBtnGroupMargin {
    .btnItem {
      border: 1px solid @blue;
    }
  }
}
.workList {
  .item {
    .itemHead {
      .itemNumber {
        background: rgb(251, 218, 214);
        color: @blue;
      }
    }
  }
  .itemMain {
    .workInfo {
      color: @blue;
    }
  }
}
.filterListDialog {
  .filterListTitle {
    color: #555;
    &::before {
      content: "";
      background: @blue;
    }
  }
}
